
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>barrage</title>
    <style>
        .box{
            width: 800px;
            height: 500px;
            margin:0 auto;
        }
        .barrage-container-wrap{
            width: 100%;
            height: 500px;
            position: relative;
            overflow: hidden;
            background: #C1CDC1;
            background-size: 100% 100%;
        }
        .barrage-container{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 30px;

            cursor: default;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        .barrage-item{
            position:absolute;
            top:0;
            left: 100%;
            white-space: nowrap;
            cursor: pointer;
            color:#fff;
        }
        .barrage-item .barrage-tip{
            display: none;
            position: absolute;
            top:-26px;
            padding: 7px 15px;
            line-height: 12px;
            font-size: 12px;
            color: #f20606;
            background-color: #fff;
            white-space: nowrap;
            border: 1px solid #ddd;
            border-radius: 8px;
            -webkit-box-shadow: 0 0 10px 1px rgba(0,0,0,.1);
            box-shadow: 0 0 10px 1px rgba(0,0,0,.1);
            -webkit-transform-origin: 15px 100%;
            -ms-transform-origin: 15px 100%;
            transform-origin: 15px 100%;
            webkit-animation: tipScale cubic-bezier(.22,.58,.12,.98) .4s;
            animation: tipScale cubic-bezier(.22,.58,.12,.98) .4s;
        }
        .send-wrap{
            margin-top: 20px;
        }
        .input{
            width: 300px;
            height: 30px;
            line-height: 30px;
            outline: none;
            -webkit-appearance: none;
            border-radius: 5px;
            padding:0;
            padding-left: 10px;
        }

        @-webkit-keyframes tipScale{
        0{
            -webkit-transform: scale(0);
            transform: scale(0);
        }
        50% {
            -webkit-transform: scale(1.1);
            transform: scale(1.1);
        }
        100% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
        }
    </style>
</head>
<body>
<div class="box">
    <div class="barrage-container-wrap clearfix">
        <div class="barrage-container">
        </div>
    </div>
    <div class="send-wrap">
        <input type="text" class="input" placeholder="弹幕发送">
        <!--<span class="send-btn">发送</span>-->
        <input type="button" value="发送"  class="send-btn">
        <input type="button" value="关闭弹幕">
    </div>
</div>
</body>
<script src="js/barrageDemo.js"></script>
<script>
    let data = ["test1","test2","test3","test4","test5","test6","test7","test8","test9","test10","test11","test12","test13","test14","test15"]
    let barrage = new Barrage(data);
</script>
</html>